import React, {Component} from 'react';
import axios from 'axios';
import TableRow from './TableRow';

// axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.getItem('access_token') // for all requests


export default class Index extends Component {


  constructor(props) {
    super(props);
    this.state = {
      overworkSignups: [],
      work_start_at: '',
      work_end_at: ''
    };
    this.onChangeWorkStartAt = this.onChangeWorkStartAt.bind(this);
    this.onChangeWorkEndAt = this.onChangeWorkEndAt.bind(this);
  }

  onChangeWorkStartAt = (e) => {
    this.setState({work_start_at: e.target.value})
  }

  onChangeWorkEndAt = (e) => {
    this.setState({work_end_at: e.target.value})
  }

  onSubmit = (e) => {
    if (!this.state.work_start_at || !this.state.work_start_at) {
      console.log(11111232323);
      e.preventDefault();
    }
  }

  componentDidMount() {
    console.log(23232323, window.localStorage.getItem('access_token'));
    if (!window.localStorage.getItem('access_token')) {
      window.location.href = 'http://127.0.0.1:3000/signin'
      return
    }

    axios.get('http://127.0.0.1:8000/overwork-signups/', {
      'headers': {
        'Authorization': 'Bearer ' + window.localStorage.getItem('access_token')
      }
    }).then(response => {
      console.log('list=====>', response);

      this.setState({overworkSignups: response.data});
    }).catch(function (error) {
      console.log(error);
    })
  }
  tabRow() {
    return this.state.overworkSignups.map(function (object, i) {
      console.log('obj and i', object, i);
      return <TableRow obj={object}
        key={i}/>;
    });
  }

  render() {
    return (
      <div>
        <h3 align="center">加班记录</h3>
        <label>加班开始时间</label><input required
          value={
            this.state.work_start_at
          }
          onChange={
            this.onChangeWorkStartAt
          }
          required
          type="datetime-local"/>&nbsp;
        <label>到加班开始时间</label><input required
          value={
            this.state.work_end_at
          }
          onChange={
            this.onChangeWorkEndAt
          }
          required
          type="datetime-local"/>&nbsp;
        <a onClick={
            this.onSubmit
          }
          href={
            `http://127.0.0.1:8000/overwork-signups/export/?work_start_at=${
              this.state.work_start_at
            }&work_end_at=${
              this.state.work_end_at
            }`
          }
          className="btn btn-sm btn-outline-success">导出记录</a>

        <table className="table table-striped"
          style={
            {marginTop: 20}
        }>
          <thead>
            <tr>
              <th>工号</th>
              <th>姓名</th>
              <th>加班开始时间</th>
              <th>加班结束时间</th>
              <th>休息开始时间</th>
              <th>休息结束时间</th>
              <th>加班内容</th>
              {/* <th>GST Number</th> */}
              <th colSpan="2">操作</th>
            </tr>
          </thead>
          <tbody> {
            this.tabRow()
          } </tbody>
        </table>
      </div>
    );
  }
}
